<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用户列表</title>
<script type="text/javascript" src="<c:url value='/static/themes/js/jquery.datatables.min.js'/>"></script>
</head>
<body>
	<div class="row">
		<div class="form-group col-sm-12"
			style="padding-bottom: 15px; ">
			<button id="addUser" type="button"
				class="btn btn-warning glyphicon glyphicon-search">新增员工</button>
		</div>
	</div>
	<!-- panel-body -->
	<!-- panel -->
	<div id="message"></div>
	<div class="panel panel-default">
		<div class="panel-body">
			<div class="table-responsive">
				<div id="table1_wrapper" class="dataTables_wrapper no-footer">
					<table id="table" class="table dataTable no-footer  table-striped"
						role="grid" aria-describedby="table1_info">
						<thead>
							<tr role="row">
								<th>账号名</th>
								<th>全部角色</th>
								<th>状态</th>
								<th>操作</th>
							</tr>
						</thead>
					</table>
				</div>
			</div>
		</div>
	</div>

	<script type="text/javascript">
	
	
	$(function($) {
		//table展示
		var table = $('#table').DataTable( {
	        "processing": true,
	        "serverSide": true,
	        "bLengthChange": false,
	        "bFilter": false,
	        "bSort":false,
	        "bDestroy":true,
	        "language": {
	            "url": path+"/static/language_datatables.json"
	        },
	        "ajax": {
	            "url": path+"/auth/user/getUserList",
	            "type": "POST",
	        },
	        "oSearch":{
	        	
	        },
	        "columns": [
	            { "data": "username","width": "10%" },
	            { "data": "rolenames","width": "20%" },
	            { "data": "userstatus" ,"width": "10%"},
	            { "data": "id" ,"width": "10%"},
	        ],
	        "columnDefs": [
				{
				    "render": function ( data, type, row ) {
				        return '<a  href='+path+'/auth/user/userdetail?id='+row.id+'&_d='+new Date().getTime()+'>'+data+'</a>';
				    },
				    "targets": 0
				},
                 {
                     "render": function ( data, type, row ) {
                         return data==1?'使用中':'已停止';
                     },
                     "targets": 2
                 },
                 {
                     "render": function ( data, type, row ) {
                    	 var buttonName = '禁用';
                    	 if(row.userstatus==0){
                    		 buttonName = '启动';
                    	 }
                         return '<button class="btn btn-warning userstatus" key="'+data+'" userstatus="'+row.userstatus+'">'+buttonName+'</button>';
                     },
                     "targets": 3
                 }
             ]

	    });
		
		function doSearch(refresh){
			if(refresh){
				table.ajax.reload(null,false);
			}else{
				table.ajax.reload();
			}
		};
		//修改用户状态
		$('body').on("click",'.userstatus',function(){
			_t = $(this);
			$.ajax({
				type : "post",
				url : path  + "/auth/user/editstatus",
				cache : false,
				data : {
					userId : _t.attr('key'),
					status : _t.attr('userstatus'),
					_t : new Date().getTime()
				},
				dataType : "json",
				success : function(data) {
					showmessage(data.msg);
					if (data.success) {
						doSearch(true);
					}
				}
			});
		});
		
		//查询事件
		$('#addUser').click(function(){
			window.location.href=path+"/auth/user/userdetail?_t="+new Date().getTime(); 
		});
		
		//显示消息
		function showmessage(msg,callback){
			$('#message').ucMessage({
				msg:msg,
				callback:callback
			});
		}
	});
	 
	</script>
</body>
</html>